<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<% 
	String webpath = request.getContextPath(); 
	String path =  request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + webpath +"/";
	request.setAttribute("path", path);
%>
<html>
<head>
	<title>新增列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- this page specific styles -->
    <link rel="stylesheet" href="${path}static/detail/css/compiled/new-user.css" type="text/css" media="screen" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<%@ include file="../common/common.jsp"%>
	
    <link rel="stylesheet" href="${path}static/detail/css/compiled/ui-elements.css" type="text/css" media="screen" />
    <script type="text/javascript">
	    // 添加全局站点信息
	    var BASE_URL = '/xlz-sy-web';
    </script>
    <script src="${path}static/detail/js/bootstrap-modal.js"></script>
    <!--引入CSS-->
	<link rel="stylesheet" type="text/css" href="${path}static/detail/js/webuploader.css">
	<!--引入JS-->
	<script type="text/javascript" src="${path}static/detail/js/webuploader.min.js"></script>
	<link rel="stylesheet" href="${path}static/upload/upload.css" type="text/css" />
	<link rel="stylesheet" href="${path}static/upload/demo.css" type="text/css" />
	<script type="text/javascript" src="${path}static/upload/upload.js"></script>
	<script type="text/javascript" src="${path}static/upload/demo.js"></script>
</head>
<body>
	<%@ include file="../common/head.jsp" %>
    <!-- sidebar -->
    <%@ include file="../common/left.jsp" %>
    <!-- end sidebar -->
	<!-- main container -->
	<form id="saveForm" action="${path}uploadFile/saveWork.do" method="post">
	    <div class="content">
	        <div class="container-fluid">
	            <div id="pad-wrapper" class="new-user" >
	                <div class="row-fluid header" >
	                    <h3  style="padding-left: 320px;">${working.title}</h3>
	                </div>
	                <div class="row-fluid form-wrapper">
	                    <!-- left column -->
	                    <div class="span9 with-sidebar">
	                        <div class="container">
	                        	<div class="field-box" >
	                              <span style="font-size: 18px;"><font style="color:gray;">作者:   </font><font style="color:blue;">${working.workName}</font></span>
	                              <span style="float: right;font-size: 18px;"><font style="color:gray;">创建时间:   </font><font style="color:blue;">${fn:substring(working.createTime,0,19)}</font></span>
		                        </div>
		                        <div class="field-box" >
	                             <c:forEach items="${images}" var="item">
	                             	 <div id="open_img_${item.id}" style="display: none;width: 400px;height: 180px;font-size: 16px;color: gray;float: left;position:absolute;z-index: 200;margin:auto;padding:40px 0px 0px 40px;filter:alpha(opacity=80);-moz-opacity:0.3;background: transparent;">
	                             	 	
	                             	 </div>
									 <img src="${item.image}" style="width: 100%;height: auto;padding-top: 30px;" onmousemove="readImage('${item.image}','${item.id}')" onmouseout="coloeImage('${item.id}')"/>
							     </c:forEach>
		                        </div>
	                        </div>
	                    </div>
	                    
	 				</div>
				</div>
			</div>
	</div>
</form>
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" style="top:8%;">
	<div class="modal-header"><button class="close" type="button" data-dismiss="modal" onclick="close();">×</button>
	
	</div>
	<!-- <div class="modal-body" style="float: right;">
		<a href="#" class="btn-flat success">保存</a>
	</div> -->
</div>
    <script type="text/javascript">
    
        $(function () {

            var $buttons = $(".toggle-inputs button");
            var $form = $("form.new_user_form");

            $buttons.click(function () {
                var mode = $(this).data("input");
                $buttons.removeClass("active");
                $(this).addClass("active");

                if (mode === "inline") {
                    $form.addClass("inline-input");
                } else {
                    $form.removeClass("inline-input");
                }
         	});
        });
        
        function readImage(url,id){
       		$.ajax({ 
           		url : "${path}/uploadFile/readImage.do",
           		type: "post", 
           		data: {'url':url},
           		dataType:'json',
           		success: function(json){
           			var data = json.ImageInformation;
           			$("#open_img_"+id).html("");
           			var html = "<p>"+((data.photoCamera=="null")?'':data.photoCamera)+"</p>"
           			+ "<p>"+((data.photoAperture=="null")?'':data.photoAperture)+"</p>"
           			+ "<p>"+((data.photoShutter=="null")?'':data.photoShutter)+"</p>"
           			+ "<p>"+((data.dervice=="null")?'':data.dervice)+"</p>"
           			+ "<p>"+((data.baoGuang=="null")?'':data.baoGuang)+"</p>"
           			+ "<p>"+((data.jiaoduan=="null")?'':data.jiaoduan)+"</p>"
           			+ "<p>"+((data.ISO=="null")?'':data.ISO)+"</p>"
           			+ "<p>"+((data.ruanJian=="null")?'':data.ruanJian)+"</p>"
           			+ "<p>"+((data.jieXiDu=="null")?'':data.jieXiDu)+"</p>"
           			+ "<p>"+((data.baiPingHeng=="null")?'':data.baiPingHeng)+"</p>"
           			+ "<p>"+((data.time=="null")?'':data.time)+"</p>";
           			if(html !=null && html !=""){
           				$("#open_img_"+id).html(html);
               			$("#open_img_"+id).css("display","");
           			}
           		}
           	}); 
        }
        
        function coloeImage(id){
        	$("#open_img_"+id).css("display","none");
        }
     
    </script>
</body>
</html>